<!DOCTYPE html>
<html>
<head>
<title>服务</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Awareness Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700,800,600,500' rel='stylesheet' type='text/css'>
</head>
<body> 
<!--header-->	
<div class="header" >
	<div class="col-md-3 header-top cbp-spmenu-push">
		<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
			<a  href="index.html">主页</a>
			<a  href="about.html">关于</a>
			<a  href="services.html">服务</a>
			<a  href="single.html" >留言板</a>
			<a  href="contact.html">联系我们</a>
		</nav>
		<!-- /script-nav -->
			<div class="main">
				<section class="buttonset">
					<button id="showLeftPush"><i  class="glyphicon glyphicon-menu-hamburger"></i></button>
				</section>
			</div>
			<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
				<script src="js/classie.js"></script>
					<script>
						var	menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
						showLeftPush = document.getElementById( 'showLeftPush' ),
						body = document.body;
							
						showLeftPush.onclick = function() {
							classie.toggle( this, 'active' );
							classie.toggle( body, 'cbp-spmenu-push-toright' );
							classie.toggle( menuLeft, 'cbp-spmenu-open' );
							disableOther( 'showLeftPush' );
						};
					</script>
	</div>
	<div class="col-md-6 logo">
		<h1><a href="index.html"><span>·</span>BOOOK</a></h1>
	</div>
	<div class="col-md-3 search">
		<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i></a>
	</div>
	<div class="clearfix"> </div>
</div>
	<!---pop-up-box---->					  
	<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
	<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
	<!---//pop-up-box---->
	<div id="small-dialog" class="mfp-hide">
		<div class="search-top">
			<div class="login">
				<input type="submit" value="">
				<input type="text" value="搜索.." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Search..';}">		
			</div>
			<p>Books</p>
		</div>				
	</div>
		 <script>
			$(document).ready(function() {
			$('.popup-with-zoom-anim').magnificPopup({
			type: 'inline',
			fixedContentPos: false,
			fixedBgPos: true,
			overflowY: 'auto',
			closeBtnInside: true,
			preloader: false,
			midClick: true,
			removalDelay: 300,
			mainClass: 'my-mfp-zoom-in'
			});
																						
			});
		</script>		
<!--//header-->
<!--banner-->
<div class="head">
	<div class="container">
		<h2 > <a href="index.html">Home</a> / <span>服务 </span></h2>
	</div>
</div>
<!--services-->
<div class="services">
	<div class="container">
		<div class="ser-top">
			<h3>BOOOK书店业务</h3>
<!--			<p>“读书可以增加一个人谈吐的质量和深度。读书，可以让你掌握知识，而知识就像呼吸 一样，吐纳之间，可以见人的气质与涵养。</p>-->
		</div>	
	<div class="service-top">
		<div class="col-md-4 service-grid">
			<span>1</span>
			<div class="grid-ser">
				<h4><a href="single.html">书籍借阅</a></h4>
				<p>“读书可以增加一个人谈吐的质量和深度。读书，可以让你掌握知识，而知识就像呼吸 一样，吐纳之间，可以见人的气质与涵养。</p>				
			</div>
			<div class="clearfix"> </div>	
		</div>
		<div class="col-md-4 service-grid">
			<span>2</span>
			<div class="grid-ser">
				<h4> <a href="single.html">私人影院</a> </h4>
				<p>可以放松心情，体验不一样的生活方式。虽然电影是艺术形式，但艺术终究来源于生活。通过看电影可以体验不一样的人生经历。</p>				
			</div>
			<div class="clearfix"> </div>	
		</div>
		<div class="col-md-4 service-grid">
			<span>3</span>
			<div class="grid-ser">
				<h4><a href="single.html">时光邮局</a> </h4>
				<p>从前车马很慢，书信来往弥足珍贵，希望今天的你还能有时间静下心来给重要的人写一封信。</p>				
			</div>
			<div class="clearfix"> </div>	
		</div>
		<div class="clearfix"> </div>
	</div>
	<div class="service-top">
		<div class="col-md-4 service-grid">
			<span>4</span>
			<div class="grid-ser">
				<h4> <a href="single.html">甜品饮料</a> </h4>
				<p>奶茶即正义，生活很苦，我们给自己加点糖吧！（欢迎知名奶茶品牌合作！）</p>				
			</div>
			<div class="clearfix"> </div>	
		</div>
		<div class="col-md-4 service-grid">
			<span>5</span>
			<div class="grid-ser">
				<h4><a href="single.html">文具周边</a></h4>
				<p>精美的文具，让人充满了学习的动力。快来把我带回家吧！</p>				
			</div>
			<div class="clearfix"> </div>	
		</div>
		<div class="col-md-4 service-grid">
			<span>6</span>
			<div class="grid-ser">
				<h4><a href="single.html">不定时彩蛋</a></h4>
				<p>读书会，观影会，活动不会断，敬请期待。</p>				
			</div>
			<div class="clearfix"> </div>	
		</div>
		<div class="clearfix"> </div>
	</div>	
				
	</div>
</div>

<!--footter-->
<div class="footer">
	<div class="footer-mid">
			<div class="container">
				<div class="col-sm-3 ft-grid1">
					<h3>Location</h3>
					<p>CHINA XTU</p>
					<P>Contact@example.com</P>
					<p>+12 312 341 234</p>
				</div>
				<div class="col-sm-3 ft-grid2">
				<h3>Follow Us</h3>
					<ul class="social-in">
						<li><a href="#"><i> </i></a></li>						
						<li><a href="#"><i class="twitter"> </i></a></li>
						<li><a href="#"><i class="dribbble"> </i></a></li>						
					</ul>
				</div>
				<div class="col-sm-6 ft-grid1">
					<h3>Newsletter</h3>
					<form>
						<input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
						<input type="submit" value="提交">
					</form>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="class-footer">
			<div class="container">
				<div class="col-md-6 footer-nav">
					<ul>
						<li ><a  href="index.html" >主页</a></li>
						<li><a  href="about.html"  >关于我们</a></li>
						<li><a href="services.html">服务</a></li>
						<li><a  href="single.html" >留言板</a></li>
						<li><a href="contact.html" >联系我们</a></li>
						
					</ul>
				</div>
				<div class="col-md-6 footer-grid">
					<p >Copyright &copy; BOOOK书店</p>	
				</div>
					<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--//footter-->
</body>
</html>